<template>
  <section>
    <el-form :model="User" ref="User" :rules="rule" label-width="100px" class="logIn">
      <h2>博客后台管理系统登陆</h2>
      <el-form-item label="用户名" prop="id">
        <el-input v-model="User.id"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="User.password"></el-input>
      </el-form-item>
      <el-button @click="logIn">登陆</el-button>
    </el-form>
  </section>
</template>
<script>/* eslint-disable indent,space-before-function-paren */
import {LogIn} from '../api/api'

export default {
  data() {
    return {
      User: {
        id: '',
        password: ''
      },
      rule: {
        id: [
          {required: true, message: '请输入邮箱', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    logIn() {
      this.$refs['User'].validate((valid) => {
        if (valid) {
          LogIn(
            {
              id: this.User.id,
              password: this.User.password
            }
          ).then(
            data => {
              if (data.status) {
                console.log('登陆成功')
                window.sessionStorage.setItem('token', data.token);
                window.sessionStorage.setItem('name', data.name);
                this.$router.push({path: '/'})
              } else {
                this.$message.error('密碼錯誤')
              }
            }
          ).catch()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style>
  .logIn {
    width: 500px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px 1px #00000021;
    padding: 20px;
    border-radius: 5px;
  }
</style>
